<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue中的条件渲染</title>
    <script src="../vue.js"></script>
    <style>
        .activated{
            color: red;
        }
    </style>
</head>ß
<body>
    <div id="app">
        <!--   都能控制一个模板标签在页面中的显示  
        区别：
            v-show  性能更高一些  ，不用再渲染dom
        
        -->
        <!-- <div v-if="show">{{message}}</div>
        <div v-else>Bye World</div>
        <div v-show="show">{{message}}</div> -->

   
        <!--   
        v-if   与 v-else-if  v-else 一定要连接写
        -->
        <!-- <div v-if="show === 'a'">This is A</div>
        <div v-else-if="show === 'b'">This is B</div>
        <div v-else >This is  others</div> -->

          <!-- DOM diff 算法。 -->
<!-- 
          https://www.zhihu.com/question/61064119 -->


         
        <div v-if="show">用户名：<input type="text"  key="userName"></div>        
        <div v-else >邮箱名：<input type="text" key="password"></div>
        


    </div>
    
    <script>
        //原生
       // var dom = document.getById('app');
       // dom.innerHtml = 'hello word';

       //  class 的对象绑定
       var vm = new Vue({
           el:"#app",
           data: {
            //    show:false,
            //    message:"Hello World"
                  //show:"a",
                  show:false,

           },         
           
         
          
       });
       
    </script>
</body>
</html>